<template>
	<view class="lookSchedule_box">
		<view class="head_box w100">
			<view class="head_center flexjus">
				<view class="left_box" @click="leftArrow">
					<image class="left_jian_icon" :src="icon.leftJianIconWhite" mode=""></image>
				</view>
				<view class="date_txt familytow fblod s44">
					{{year}}<text class="date_text s24 family f500">年</text>{{mouth}}<text
						class="date_text s24 family f500">月</text>
				</view>
				<view class="left_box" @click="rightArrow">
					<image class="left_jian_icon" :src="icon.rightJianIconWhite" mode=""></image>
				</view>
			</view>
		</view>
		<view class="" style="background: #181819;border-radius: 28rpx;overflow: hidden;">
			<view class="date_box">
				<view class="date_list_box flexjus">
					<view class="list_box s32 family f500" v-for="(item,index) in weekList" :key="index">
						{{item.txt}}
					</view>
				</view>
			</view>
			<!-- type 1空 2满 3休 4() -->
			<view class="flex flex-wrap" style="padding: 60rpx 25rpx;padding-top:0;">
				<view class="flex flex-clum align-center justify-center" @click="edit(item)" v-for="(item,index) in paiqiObj.date"
					:key="index" style="width: 100rpx;margin-top: 48rpx;overflow: hidden;height: 100rpx;" :style="(setTimes==year + '-' + String(mouth).padStart(2,'0') + '-' + String(item.num).padStart(2,'0'))?'border-radius: 50%;border: 2rpx solid #FF3F4A;width: 96rpx;height: 96rpx;':''">
					<view class="" style="font-size: 32rpx;font-weight: 500;"
						:style="(item.type==1)&&(Number(nowMouth)<Number(mouth)||(Number(nowMouth)==Number(mouth)&&Number(nowDay)<Number(item.num)))?'color:#CCCCCC;':'color: #6E6F71;'">
						{{item.num}}
					</view>
					<!-- <view class="" style="font-size: 24rpx;margin-top: 4rpx;"
						:style="item.type!=2?'color:#CCCCCC;':'color: #FF3F4A;'">
						{{
							item.type==1?'空':
							item.type==2?'满':
							item.type==3?'休':''
						}}
					</view> -->
					<view v-if="!(Number(nowMouth)<Number(mouth)||(Number(nowMouth)==Number(mouth)&&Number(nowDay)<Number(item.num)))" style="font-size: 24rpx;margin-top: 4rpx;
						color: #6E6F71;">
						{{
							item.type==1?'空':
							item.type==2?'满':
							item.type==3?'休':''
						}}
					</view>
					<view v-else class="" style="font-size: 24rpx;margin-top: 4rpx;"
						:style="item.type!=2?'color:#CCCCCC;':'color: #FF3F4A;'">
						{{
							item.type==1?'空':
							item.type==2?'满':
							item.type==3?'休':''
						}}
					</view>
				</view>
			</view>
		</view>
		<view class="good_style_box">
			<view class="txt_icon_box flex">
				<view class="txt family f500 s28">
					擅长风格
				</view>
				<view class="leaf_icon">
					<image class="w100 h100" :src="icon.leafIcon" mode=""></image>
				</view>
			</view>
			<view class="scroll_box">
				<scroll-view class="scroll-view_H flex" scroll-x="true">
					<view id="demo1" class="scroll-view-item_H" v-for="(item,index) in paiqiObj.wedding" :key="index">
						<view class="image_box">
							<image class="w100 h100" style="border-radius: 50%;" :src="item.image_src" mode=""></image>
						</view>
						<view class="leaf_txt s24 familythree f400 txtali">
							{{item.name.substring(0,4)}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view v-if="type==1" class="flex align-center justify-center" style="padding: 10rpx 0;position: fixed;width: 100%;bottom: 10rpx;">
			<view @click="yuyue" class="flex align-center justify-center" style="width: 686rpx;height: 80rpx;background: linear-gradient(270deg, #B49C6E 0%, #ECD9AF 100%);border-radius: 40rpx;font-size: 28rpx;color: #111111;">
				预约
			</view>
		</view>
		<view v-if="type==1" class="flex align-center justify-center" style="padding: 10rpx 0;opacity: 0;">
			<view class="flex align-center justify-center" style="width: 686rpx;height: 80rpx;">
				
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" backgroundColor="#FFFFFF">
			<view class="top_box_bot w100 txtali">
				<view class="title_txt s30 familytow fblod">
					修改档期状态
				</view>
			</view>
			<view class="type_box">
				<view :class="[typeIndex == index ? 'list_type_active' : 'list_type_box','s30','familythree','f400']"
					v-for="(item,index) in typeList" :key="index" @click="active(index)">
					{{item.txt}}
				</view>
			</view>
			<view class="bottom_btn s28 familythree f400 txtali" @click="close">
				确定
			</view>
			<view class="" style="height: 58rpx;">

			</view>
		</uni-popup>
		<uni-popup ref="toast" type="center">
			<view class="" style="width: 468rpx;min-height: 270rpx;background: #FFFFFF;border-radius: 32rpx 32rpx 32rpx 32rpx;">
				<view class="" style="padding: 62rpx 57rpx 32rpx 57rpx;border-bottom: 2rpx solid #F4F4F4;font-size: 30rpx;font-weight: 500;color: #000000;">
					{{toastText}}
				</view>
				<view @click="this.$refs.toast.close()" class="flex align-center justify-center" style="font-size: 30rpx;font-weight: 500;color: #EBBE87;height: 92rpx;">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				weekList: [{
						txt: '日'
					},
					{
						txt: '一'
					},
					{
						txt: '二'
					},
					{
						txt: '三'
					},
					{
						txt: '四'
					},
					{
						txt: '五'
					},
					{
						txt: '六'
					}
				],
				year: '',
				mouth: '',
				typeList: [{
					txt: '空'
				}, {
					txt: '休'
				}, {
					txt: '满'
				}],
				typeIndex: 0,
				paiqiObj: {},
				teacherId: 0, //老师id
				setTimes:'',//要设置档期的时间
				toastText:'',//修改档期成功提示文本
				type:0,
				nowYear:'',
				nowMouth:'',
				nowDay:''
			}
		},
		computed: {
			...mapState(['icon'])
		},
		onLoad(options) {
			this.teacherId = options.teacherId;
			if(options.type){
				// 是否显示预约按钮
				this.type = options.type;
			}
			this.year = this.getNowDate(1);
			this.mouth = this.getNowDate(2);
			this.nowYear = this.getNowDate(1);
			this.nowMouth = this.getNowDate(2);
			this.nowDay = this.getNowDate(3);
			this.setTime(this.year + '-' + String(this.mouth).padStart(2,"0"));
		},
		methods: {
			yuyue(){
				uni.setStorageSync('isyuyue',true);
				uni.navigateBack({
					delta:1
				})
			},
			edit(item) {
				if(this.type==1){
					return;
				}
				if (item.type == 4) {
					return;
				}
				// （档期调整）过去日期灰色不可调
				if(!(Number(this.nowMouth)<Number(this.mouth)||(Number(this.nowMouth)==Number(this.mouth)&&Number(this.nowDay)<Number(item.num)))){
					return;
				}
				this.setTimes = this.year + '-' + String(this.mouth).padStart(2,"0") + '-' + String(item.num).padStart(2,"0");
				if (item.type == 1) {
					// 空
					this.typeList = [{
						txt: '休',
						type: 3,
					}, {
						txt: '满',
						type: 2
					}]
				} else if (item.type == 2) {
					//满
					this.typeList = [{
						txt: '空',
						type: 1
					}, {
						txt: '休',
						type: 3
					}]
				} else if (item.type == 3) {
					//休
					this.typeList = [{
						txt: '空',
						type: 1
					}, {
						txt: '满',
						type: 2
					}]
				}
				this.$refs.popup.open();
			},
			active(index) {
				this.typeIndex = index
			},
			// 确认修改档期
			close() {
				this.$request({
					url: 'wedding/worker_time_update',
					method: 'POST',
					data: {
						worker_id: this.teacherId,
						time: this.setTimes,
						type:this.typeList[this.typeIndex].type
					}
				}).then(res => {
					if(res.data.code==1){
						this.setTime(this.year + '-' + String(this.mouth).padStart(2,"0"));
						this.$refs.popup.close();
						this.toastText = res.data.msg;
						this.$refs.toast.open();
					}else {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
			},
			//查看档期 月份加减
			leftArrow() {
				this.mouth--;
				if (this.mouth < 1) {
					this.year--;
					this.mouth = 12;
				}
				this.setTime(this.year + '-' + String(this.mouth).padStart(2,"0"));
			},
			rightArrow() {
				this.mouth++;
				if (this.mouth > 12) {
					this.year++;
					this.mouth = 1;
				}
				this.setTime(this.year + '-' + String(this.mouth).padStart(2,"0"));
			},
			// 查看档期
			setTime(e) {
				this.$request({
					url: 'wedding/worker_time',
					method: 'POST',
					data: {
						worker_id: this.teacherId,
						time: e
					}
				}).then(res => {
					let week = new Date(e + '-1').getDay();
					// 计算上个月的天数
					let years = 0;
					let months = 0;
					if (this.mouth - 1 < 1) {
						years = this.year - 1;
						months = 12;
					} else {
						years = this.year;
						months = this.mouth - 1;
					}
					let days = new Date(years, months, 0).getDate();
					for (let i = 0; i < week; i++) {
						let obj = {
							"num": days - i,
							"type": 4 //1空2满3休
						}
						res.data.data.date.unshift(obj)
					}
					for (let i = 0; i < res.data.data.date.length % 7; i++) {
						let obj = {
							"num": i + 1,
							"type": 4 //1空2满3休
						}
						res.data.data.date.push(obj)
					}
					this.paiqiObj = res.data.data;
				})
			},
			getNowDate(type) {
				let date = new Date();
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				let d = date.getDate();
				if (type == 1) {
					return y;
				} else if (type == 2) {
					return m;
				}else{
					return d;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.flex {
		display: flex;
	}

	.flex-clum {
		flex-direction: column;
	}

	.align-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-center {
		justify-content: center;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.lookSchedule_box {
		overflow: hidden;

		.head_box {
			height: 182upx;
			overflow: hidden;

			.head_center {
				margin-top: 80upx;
				padding: 0 32upx 0 32upx;
				box-sizing: border-box;

				.left_box {
					width: 62upx;
					height: 62upx;
					border: 2upx solid #6E6F71;
					border-radius: 50%;

					.left_jian_icon {
						width: 16upx;
						height: 24upx;
						display: block;
						margin: 20upx auto;
					}
				}

				.date_txt {
					color: #FFFFFF;

					.date_text {
						color: #999999;
					}
				}
			}
		}

		.date_box {
			border-radius: 28upx;
			padding: 60upx 25upx 0upx 25upx;

			.list_box {
				width: 100upx;
				height: 44upx;
				color: #FFFFFF;
				text-align: center;
			}
		}

		.good_style_box {
			padding-left: 32upx;
			padding-top: 40upx;
			box-sizing: border-box;

			.txt_icon_box {
				.txt {
					color: #FFFFFF;
				}

				.leaf_icon {
					width: 36upx;
					height: 36upx;
					margin-left: 4upx;
					margin-top: 2upx;
				}
			}

			.scroll_box {
				margin-top: 28upx;

				.scroll-view_H {
					white-space: nowrap;

					.scroll-view-item_H {
						display: inline-block;
						width: 96upx;
						margin-right: 40upx;
						overflow: hidden;

						.image_box {
							width: 82upx;
							height: 82upx;
							background-color: #323238;
							border-radius: 50%;
							margin: 0 auto;
						}

						.leaf_txt {
							color: #CCCCCC;
							margin-top: 20upx;
						}
					}
				}
			}
		}

		.top_box_bot {
			height: 130upx;
			background: linear-gradient(180deg, #FFF7EA 0%, rgba(255, 255, 255, 0) 100%);
			overflow: hidden;

			.title_txt {
				color: #111111;
				margin-top: 36upx;
			}
		}

		.type_box {
			margin-top: 26upx;

			.list_type_box {
				width: 750upx;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
			}

			.list_type_active {
				width: 750upx;
				height: 88upx;
				background: linear-gradient(86deg, rgba(237, 237, 237, 0) 0%, #EDEDED 54%, rgba(237, 237, 237, 0) 100%);
				line-height: 88upx;
				text-align: center;
			}
		}

		.bottom_btn {
			width: 686upx;
			height: 80upx;
			background: linear-gradient(154deg, #E4B77F 0%, #CD9C61 100%);
			border-radius: 40upx;
			margin: 68upx auto;
			margin-bottom: 0;
			color: #FFFFFF;
			line-height: 80upx;
		}
	}
</style>
<style>
	page {
		background-color: #111111;
	}
</style>
